<template>
  <!-- <video class="overview-video" controls controlsList="nodownload">
    <source :src="videoUrl" type="video/mp4">
    Your browser does not support the video tag.
  </video> -->
  <div style="border: 1px solid #ccc">
    <!-- 文本样式选择区 -->
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <!-- 内容区 -->
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="inputValue"
      :defaultConfig="editorConfig"
      :mode="quillContent"
      @on-created="handleCreated"
    />

    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
// 富文本编辑器
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {EnterpriseApi} from '@/api/farm/enterprise'
import { number } from 'vue-types'
// import { Message } from '@element-plus/icons-vue/dist/types'
const { proxy } = getCurrentInstance()

const message = useMessage() // 消息弹窗
const videoUrl = ref('')
const fileType = ref(['mp4'])
const fileList = ref('')
const imgList = ref('')
const type = 'quill'


const honorId = ref<number | null>(null);// 用于存储 ID

// 使用 reactive 定义 honorData
const honorData = reactive({
  id: null,
  urls: [],
  type: ''
});


const emit = defineEmits(["update:modelValue"])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入内容...'
  }
})
const inputValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit("update:modelValue", value)
  }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const quillContent = ref('default')
const test = ref(false)
const editorConfig = {placeholder: props.placeholder}
// 默认工具栏配置
const toolbarConfig = {}

/** 排除菜单组，写菜单组 key 的值即可 */
toolbarConfig.excludeKeys = [
  'group-image',
  'group-video',
  'fullScreen'
]



/** 记录 editor 实例，重要！*/
const handleCreated = (editor) => {
  editorRef.value = editor
}
/** 获取HTML格式内容方法 */
const getHtml = () => {
  return editorRef.value.getHtml()
}

/** 获取原始文本内容方法 */
const getText = () => {
  return editorRef.value.getText()
}

/** 暴露方法 */
defineExpose({getHtml, getText})

const getList =()=>{
  const params = { type: 'quill' };
   EnterpriseApi.getHonorList(params).then((res) => {
    console.log(res,'resquill');
    
    // 1.如果页面初始有数据,存储数据
    honorData.id =res.id;//存储现有的id
    honorData.urls = res.urls;//存储现有的url
    honorData.type = res.type;//存储现有的type


    if (res && res.urls && res.urls.length > 0) {
      const content1 = res.urls[0]; // 获取第一个 URL
      console.log(content1,'content1');
      
      editorRef.value.setHtml(content1)
      
    }
  }).catch(error => {//失败处理
    console.log(error,'error');
  });
}

// 提交
const submit = () =>{
  const content = editorRef.value?.getHtml() || ''; // 获取 HTML 格式的内容
  const rawText = editorRef.value?.getText() || ''; // 获取纯文本内容
  console.log(content,'content');
  console.log(rawText,'rawText');

    // 将内容与类型关联
  const contentToSubmit = {
    id: honorData.id || null, // 使用 honorId 变量
    urls: [],
    type: honorData.type || 'quill', // 默认类型
  };
  // 1.将内容放入到urls数组中
  if(content){
    contentToSubmit.urls.push(content);// 如果有 HTML 内容，放入 urls 中
  }else if(rawText){
    contentToSubmit.urls.push(rawText) // 如果没有 HTML 内容，但有纯文本，放入 urls 中
  }

  console.log(contentToSubmit,'contentToSubmit');
  

  EnterpriseApi.postHonorArray(contentToSubmit).then((res) => {
    message.success('提交成功')
    getList()
  }).catch(error => {//失败处理
    console.log(error,'error');
  });

}
onMounted(()=>{
  getList()
})
/** 组件销毁时，也及时销毁编辑器 */
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

</script>
<style scoped>
</style>
